<template>
    <!-- 用户个人中心 -->
    <div id="Self">
        <!-- 头部布局 -->
        <div class="head">
        <!-- 头部布局背景 -->
        <div class="head_background">
            <!-- <img src="~@/../static/images/selfCenterHead_pic.jpg" class="selfCenterHeadPic"> -->
            <!-- 头部显示的用户头像及用户昵称 -->
        <div class="userHead">
            <div class="head_pic">
                <i class="user_head_pic"></i>
            </div>
            <div class="head_basic">
                <!-- 从数据库中查询显示于此<input type="text" v-model="computedUserName"> -->
                <span class="head_name"><h2>欢迎您，</h2><p id="nameofuser">{{getUserName}}</p></span>
                <div>
                    <span>个人简介</span>
                    <input type="text">
                </div>
                <!-- 右侧显示用户基本信息 -->
                <!-- <div class="right_info">
                    <span>个人电话：<input type="text"></span>
                    <span>个人邮箱：<input type="text"></span>
                    <span></span>
                </div> -->
            </div>
        </div>
        </div>
        </div>
        <!-- 用户中心所有基本功能 -->
        <div class="selfContent">
            <h1 class="content_h1">EveryThing</h1>
            <!-- 初步决定是将内容作为选项卡的形式 -->
            <div class="content_select_card">
                <div class="tab-hd">
		            <a href="javascript:;" :class="{'now':index==1}" @click="index=1"><span>个人主页</span></a>
		            <a href="javascript:;" :class="{'now':index==2}" @click="index=2"><span>关注内容</span></a>
		            <a href="javascript:;" :class="{'now':index==3}" @click="index=3"><span>收藏</span></a>
	            </div>
	            <div class="tab-bd">
		            <div class="tab-item" v-show="index==1">
                        <div class="my_video">
                            <span><h2>我的视频</h2></span>
                            <span class="">还没有上传过视频哦~<p class="tab-item-span-a" @click="tapUploadFile()">立即上传</p></span>
                        </div>
                        <hr>
                        <div class="my_article">
                            <span><h2>我的文章</h2></span>
                            <span class="">还没有发布过文章哦~<p class="tab-item-span-a" @click="tapUploadColumn()">立即上传</p></span>
                        </div>
                        <hr>
                        <div class="my_tag">
                            <span><h2>创建的标签</h2></span>
                            <div>
                                <p>共享内容可以以分类标签被找到~</p>
                            </div>
                            <div class="my_tag_span_btn">
                                <a href="">
                                    <span>
                                        创建标签
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
		            <div class="tab-item" v-show="index==2">22</div>
		            <div class="tab-item" v-show="index==3">333</div>
	            </div>
            </div>
        </div>
        <!-- 用户浏览记录 -->
        <div class="history">
            <h1 class="content_h1">AnyThing That You Looked</h1>
        </div>
        <br/>
        <hr>
        <div>

        </div>
        <br/>
    </div>    
</template>

<script>
import lgoinBckground from '@/../static/images/selfCenterHead_pic.jpg'

//引入VueEvent公共JS
import VueEvent from '../model/VueEvent.js'
import { setTimeout, setInterval } from 'timers';
import {setCookie,getCookie} from '../assets/js/cookie.js'
import axios from 'axios';

export default {
    mounted(){
        this.getTheName()
    },
    created(){
        this.getHistoryRecord()
    },
    data(){
        return{
            index:0,
            data_username:'',
            showUserName:false,
            getUserName:'',
            getUserAccount:''
        }
    },
    methods:{
        getTheName(){
            VueEvent.$on('name-to-selfcenter',function(data){
            console.log(data)
            this.getUserName = data
            })
        },
        getTheData(){
        },
        getHistoryRecord(){
            this.getUserAccount=getCookie('useraccount')
            let data={'userAccount':this.getUserAccount}
            axios.post('http://localhost:8080/SSM_jy/history/findresourceidofuser',data).then((res)=>{
                console.log(res)
                console.log(res.data)
            })
        },
        tapUploadFile(){
            this.$router.push({path:'/FileUpload'})
        },
        tapUploadColumn(){
            this.$router.push({path:'/columnContribution'})
        }
    },
}
</script>

<style scoped>
#Self{
    background-color: #f5f5f5;
}
.head{
    margin: 1px 0px 0px 0px;
    height: 200px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
    background-image: url('~@/../static/images/selfCenterHead_background.jpg');
    background-size: 100% 200px;
}
.userHead{
    margin: 10px 5px 5px 30px;
    display: flex;
    position: relative;
    top: 30%;
    width: 600px;
    height: 150px;
    color:black;
}
.head_background{
    position: relative;
    top: 25%;
}
.head_pic{
    width: 80px;
    height: 80px;
}
.user_head_pic{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/repush.png');
    background-position: center center;
    background-size: 80px 80px;
}
.head_basic{
    width: 120px;
    height: 80px;
    margin: 5px 5px 5px 5px;
}
.right_info{
    float: right;
}
.head_name{
    width: 80px;
    height: 50px;
}
.name{
    display: block;
    width: 100px;
    height: 50px;
    color: black;
}
/* .head_background{
} */
.selfContent{
    margin: 12px 0px 0px 0px;
    height: 600px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
    /* border-bottom: 1px solid #0000; */
}
.tab-hd { position: relative; height:36px; margin:15px 0; border-bottom:1px solid #ddd;}
.tab-hd a { float:left; padding:8px 20px; margin-right:-1px; background: #fbfaf8; border:1px solid #ddd; text-decoration: none; color: black; }
.tab-hd a:hover { background: #fff; color: #4998df; }
.tab-hd .now { padding: 8px 20px 7px; border-top:2px solid #4998df; border-bottom:1px solid #fff; background: #fff; z-index: 2; }
.tab-item-span-a{text-decoration: none;color:#4998df; text-align: center;}
.tab-item-span-a:hover{color: rgb(233, 72, 139);}
.my_tag_span_btn{
    width: 100px;
    height: 50px;
    background-color:#4998df;
    text-align: center;
    vertical-align: baseline;
    line-height: 50px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}
.my_tag_span_btn a{
    display: inline-block;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;color:white;
}
.my_tag_span_btn a:hover{
    color: rgb(233, 72, 139);
}
.my_tag_span_btn span{
    width: 100px;
    text-align: center;
    vertical-align: top;
    font-size: 18px;
}
.content_h1{
    margin: 0px 0px 0px 15px;
}
.history{
    margin: 12px 0px 0px 0px;
    height: 600px;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
}
</style>
